<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/common.jsp"%>
<script type="text/javascript" src="<s:url value='/ui/swfobject.js' />"></script>
<link rel="stylesheet" type="text/css" href="<s:url value='/ui/workflow/css/wfmc.css'/>" />
<script type="text/javascript" src="<s:url value='/ui/workflow/raphael.js'/>"></script>
<style type="text/css">
.erectTab_border{border:1px solid #95C9E1;width:770px;margin:0px;padding:0px;margin-bottom:15px; overflow:hidden;}
.erectTab_menuBox {line-height:28px;position:relative; float:left; width:130px; height:400px;border-right:1px solid #95C9E1;}
.erectTab_menuBox ul{margin:0px;padding:0px;list-style:none; position:absolute; top:15px; left:5px; margin-left:10px; height:25px;text-align:center;}
.erectTab_menuBox li{display:block;cursor:pointer;width:114px;color:#949694;font-weight:bold; margin-bottom:5px;height:25px;line-height:25px; background-color:#E4F2FD}
.erectTab_menuBox li.hover{padding:0px;background:#fff;width:116px;border:1px solid #95C9E1; border-right:0;color:#739242;height:25px;line-height:25px;}
.erectTab_contentBox{margin-top:0px; border-top:none;border-left:0; margin-left:130px;height:400px; overflow:hidden;}
</style>
<!--
<script type="text/javascript" src="<s:url value='/common-scripts/js/wfmc.designer.min.js'/>"></script>
-->
 <script type="text/javascript" src="<s:url value='/ui/workflow/wfmc.designer.modal.ProcessDefinition.js'/>"></script>
<script type="text/javascript" src="<s:url value='/ui/workflow/wfmc.designer.modal.Activity.js'/>"></script>
<script type="text/javascript" src="<s:url value='/ui/workflow/wfmc.designer.modal.Transition.js'/>"></script>
<script type="text/javascript" src="<s:url value='/ui/workflow/wfmc.designer.util.Array.js'/>"></script>

<script type="text/javascript" src="<s:url value='/ui/workflow/wfmc.designer.control.Context.js'/>"></script>
<script type="text/javascript" src="<s:url value='/ui/workflow/wfmc.designer.view.shape.Bakground.js'/>"></script>
<script type="text/javascript" src="<s:url value='/ui/workflow/wfmc.designer.view.shape.HotPoint.js'/>"></script>
<script type="text/javascript" src="<s:url value='/ui/workflow/wfmc.designer.view.shape.PathHotPoint.js'/>"></script>
<script type="text/javascript" src="<s:url value='/ui/workflow/wfmc.designer.view.shape.StartNode.js'/>"></script>
<script type="text/javascript" src="<s:url value='/ui/workflow/wfmc.designer.view.shape.dragevent.js'/>"></script>
<script type="text/javascript" src="<s:url value='/ui/workflow/wfmc.designer.view.command.createCommand.js'/>"></script>
<script type="text/javascript" src="<s:url value='/ui/workflow/wfmc.util.compareCoordinate.js'/>"></script>
<script type="text/javascript" src="<s:url value='/ui/workflow/wfmc.util.contextMenu.js'/>"></script>
<script lang="javascript" type="text/javascript">
var context = null;
var rightClickObj = null;
var dto = null;
var jspUrl = null;
var rowNumber = null;
$(function(){
	context = new Context({
			id: "canvas_container",
			readOnly: false
	});	
	
	rowNumber = $('#processGrid').datagrid('getSelected');
	context.sid  = rowNumber.sid;
	/**右键事件*/
	context.menuClick = function(objName, action, obj){
		rightClickObj = obj;
		//流程全局信息
		if("process"==objName){
			
		//节点属性	
		}else if("activity"==objName){
			if("edit"==action){
				$('#activityType').combobox({
					valueField:'id',
				    textField:'text',
				    data:CQOA.activityType
				});
				$("#nodeForm").form("load", obj);
				//默认打开第一个属性
				$('#node_tabs').tabs(0);
				showHideFun('nodeWin','open');
			}else if("copy"==action){
				var newObj = $.extend({}, obj);
	        	//获取要复制节点的类型
	        	context.command = obj.clazz;
	        	newObj.sid = context.getUuid();
	        	context.setCommandObject(CommandCreateNode(context, newObj));
	        	//复制完毕，将context中的类型置空
	        	context.command = null;
	        	return false;
			}
		}
	}
	context.objClick = function(event, objType, obj) {
	    
	};
	context.objMouseover = function(event, objType, obj) {
		
	};
	context.objMouseout = function(event, objType, obj) {
		
	};
	loadDefinition(context.sid);
	$('#draw_save').bind('click',function(){
		 var entity = {
		            "dto.sid": context.sid,
		            "dto.activities": [],
		            "dto.transitions": [],
		            "dto.activityParticipations": [],
		        };
		        // 拼装活动相关属性
		        $.each(context.processDefinition.activityList, function() {
		            // 拼装活动数组
		            var activity = {
		        		sid: this.sid,
		                processDefinitionSid: context.sid,
		                position: this.x + ":" + this.y,
		                name: this.name,
		                alias: this.alias,
		                type: this.type ? this.type : 0,
		                clazz: this.clazz,
		                isAsync: this.isAsync,
		                isVote: this.isVote,
		                duration:this.duration,
		                voteRate: this.voteRate,
		                isMultiTask: this.isMultiTask,
		                description: this.description ? this.description : null,
		                url: this.url ? this.url : null
		            };
		            entity["dto.activities"].push(activity);
		            
		    		 //活动参与人
		    		if (this.activityParticipationList && this.clazz == 'U') {
		    			var _that = this;
		    			$.each(this.activityParticipationList,function(i){
		    				this.activitySid = _that.sid;
		    				entity["dto.activityParticipations"].push(this);
		    			});
		    		}
		        });
		        
		        // 拼装路由相关属性
		        $.each(context.processDefinition.transitionList, function() {
		            // 拼装路由数组
		            var transition = {
		                sid: this.sid,
		                name: this.name ? this.name : "",
		                alias: this.alias ? this.alias : "",
		                fromIndex: this.fromIndex ? this.fromIndex : 999,
		                fromSid: this.startActivity.sid,
		                toSid: this.endActivity.sid,
		                processDefinitionSid: context.sid,
		                position: this.view.attr().path.join(";")
		            };
		            entity["dto.transitions"].push(transition);
		        });
		        postcommit(ctx+'/wfc/Process!saveDefinition.action',entity,function(o){
					if(o.success){
						comeback();
					}
					$.messager.show({
						msg : o.msg
					});
				});
		        
		        
	});
	
	$('#draw_return').bind('click',function(){
		comeback();
	});
	
	//是否同步任务
    $("#isAsync").bind("change",function(){
    	if('0'==this.value){
    		$("#isVote").val("0");
    		$("#voteDiv").hide();
    	}else{
    		$("#voteDiv").show();
    	}
    });
	
    $('#node_tabs').tabs({
        border:false,
        onSelect:function(title){
            if('参与人'==title){
            	var partList = rightClickObj.activityParticipationList;
            	if(partList.length==0){
            		partList = [{'participationSid':'0','participationCname':'全单位','type':'0','activitySid':rightClickObj.sid}];
            	}
            	appendSelected(partList);
            	$('#selectloadMsg').hide();
            }
        }
    });
    //活动类型选择
    $('#partType').combobox({
    	onSelect: function(row){
    		clearItem();
    		clearTreeNode();
    		//全单位
    		if(row.value==0){
    			dblFunction('0','全单位');
    		//部门	
    		}else if(row.value==1){
    			loadOrgTree();
    		//岗位
    		}else if(row.value==2){
    		
    		//人员
    		}else if(row.value==3){
    			loadPersonTree();
    		//活动	
    		}else if(row.value==4){
    			
    		}
    		
        }
    });
	
	
});


function dblFunction(sid,text){
	var _obj = {
			type : $('#partType').combobox("getValue"),
			participationSid : sid,
			activitySid : rightClickObj.sid,
			participationCname : text
		};
		var _objArray = [];
		_objArray.push(_obj);
		appendSelected(_objArray);//添加到target options中
};

//删除流程属性
function removeProcessProperty(sel) {
    var idx = sel.selectedIndex;
    if (idx >= 0) {
    	sel.remove(idx);
    }
    if (idx < sel.options.length) {
    	sel.selectedIndex = idx;
    } else if (sel.options.length > 0) {
    	sel.selectedIndex = sel.options.length - 1;
    }
};



function node_save(){
	//var node = $('#nodeForm').serialize();
	var node = CQOA.getFormData('#nodeForm');
	if(rightClickObj.activityParticipationList && rightClickObj.activityParticipationList.length>0){
		
	}else{
		var opts = document.getElementById("selectedTargets").options;
		if (opts.length == 0) {
	        $.messager.show({
	            msg : "请选择参与人!"
	        });
	        return false;
	    }
		var rows = [];
		for ( var i = 0; i < opts.length; i++) {
			var row = {};
			row.participationCname = opts[i].text;
			row.participationSid = opts[i].value;
			row.type = $(opts[i]).attr('type');
			row.activitySid = $(opts[i]).attr('activitySid');
			rows.push(row);
		}
		node.activityParticipationList = rows;
	}
	
	$.extend(rightClickObj, node);
    context.updateActivity(rightClickObj);
    clearItem();
    clearTreeNode();
    showHideFun('nodeWin','close');
};
/**
 * 添加节点参阅人
 */
function appendSelected(options){
	$.each(options,function(i){
		if(options[i].participationSid && options[i].participationSid.substr(0,1) == 'u'){
			options[i].participationSid = options[i].participationSid.substr(1);
		}
		if(false == optionExists(options[i].participationSid)){
			var opt = "<option ondblclick='removeItem();' value='"+ options[i].participationSid+"'  participationSid='"+options[i].participationSid+"' type='"+options[i].type+"'  activitySid='"+options[i].activitySid+"'>" + options[i].participationCname + "</option>";
			$(opt).appendTo($("#selectedTargets"));
		}
	}) ;
}
//判断target options是否存在
function optionExists(value){
	var result = false;
	$("#selectedTargets option").each(function() {
		if ($(this).val() == value) {
			result = true;
			return result;
		}
	});
	return result;
};
//清空
function clearItem() {
	document.getElementById("selectedTargets").options.length = 0;
	return false;
};
//清空树
function clearTreeNode(){
	$('#_target_node_div').children().remove();
	$('#_target_node_div').append('<ul id="target_node_tree" class="easyui-tree"></ul>');
};
//加载人员树
function loadPersonTree(){
	var userSelectTree=ctx + '/sm/User!findUserTree.action';
	$('#target_node_tree').tree({
		url: userSelectTree,
        fit: true,
        idField: 'id',
        treeField: 'text',
        onBeforeLoad : function(row, param) {
			if (row) {
				userSelectTree = ctx + '/sm/User!findUserTree.action?id='+row.id;
			}
		},
		onDblClick : function(node){
			if ($('#target_node_tree').tree("isLeaf", node.target)) {
				addI(node);
			}
		},onClick : function(node) {
			
		},onExpand : function(node) {
			
		},onLoadSuccess: function(){
			$('#selectloadMsg').hide();
		}
	});
};

function loadOrgTree(){
	var userSelectTree = ctx + '/sm/Org!findCompanyTree.action';
	$('#target_node_tree').tree({
		url: userSelectTree,
        fit: true,
        idField: 'id',
        treeField: 'text',
        onBeforeLoad : function(row, param) {
			if (row) {
				return false;
			}
		},
		onDblClick : function(node){
			addI(node);
		},onClick : function(node) {
			
		},onExpand : function(node) {
			
		},onLoadSuccess: function(){
			$('#selectloadMsg').hide();
		}
	});
};




//添加本级节点
function addItem() {
	
	var node_type = $('#partType').combobox("getValue");
	//全单位
	if(node_type==0){
		dblFunction('0','全单位');
	//部门	
	}else if(node_type==1){
		var node = $('#target_node_tree').tree("getSelected");//选择的节点
		if (node == null)
			return;//如果为NULL，则返回
		addI(node);
	//岗位
	}else if(node_type==2){
	
	//人员
	}else if(node_type==3){
		var node = $('#target_node_tree').tree("getSelected");//选择的节点
		if (node == null)
			return;//如果为NULL，则返回
		if ($('#target_node_tree').tree("isLeaf", node.target)) {
				addI(node);
		}
	//活动	
	}else if(node_type==4){
		
	}
	
};
//添加
function addI(node) {
	if(node){
		dblFunction(node.id,node.text);
	}
};

function removeItem(){
	var lst = document.getElementById("selectedTargets");
	var idx = lst.selectedIndex;
	if (idx >= 0)
		lst.remove(idx);
	if (idx < lst.options.length)
		lst.selectedIndex = idx;
	else if (lst.options.length > 0)
		lst.selectedIndex = lst.options.length - 1;
};
function loadDefinition(val){
	$.post(ctx + '/wfc/Process!loadDefinition.action', {
		'types':rowNumber.types,
        'entity.sid': val
    }, function(data) {
    	dto = data.result;
    	jspUrl = dto.processJsps;
    	context.drawActivityAndTransition(dto.activities, dto.transitions);
    	
    	$('#jspUrl').combobox({
			valueField:'url',
		    textField:'cname',
		    data:jspUrl
		});
    });
	
};

</script>
<div id="easyui-title" style="display:none">
		            	流程绘制
</div>


<div id="layout" class="easyui-layout" fit="true" split="false" style="width: 100%;height: 100%;">
		<!-- 查询条件栏 -->
		<div class="easyui-panel" style="width:60px;height: 100%;" region="west" border="false">
			<div id="definition-toolbar" >
				<a id="draw_save" class="easyui-linkbutton" >保存</a>
				<a id="draw_return" class="easyui-linkbutton" >返回</a>
				<a  class="easyui-linkbutton" onclick="context.create('')">选择</a>
				<a  class="easyui-linkbutton" onclick="context.create('R')">开始</a>
				<a  class="easyui-linkbutton" onclick="context.create('E')">结束</a>
				<a  class="easyui-linkbutton" onclick="context.create('U')">节点</a>
				<!-- 
				<a  class="easyui-linkbutton" onclick="context.create('F')">分支</a>
				<a  class="easyui-linkbutton" onclick="context.create('J')">汇聚</a>
				 -->
				<a  class="easyui-linkbutton" onclick="context.create('D')">判断</a>
				<a  class="easyui-linkbutton" onclick="context.create('line')">路由</a>
			</div>
		</div>
		<div region="center" border="false" style="overflow: hidden;border: 1px solid #000000;">
			<div class="wfmc_body" style="overflow: auto; width: 100%; height: 100%;position:absolute;">
				<div id="canvas_container" style="overflow: none;width:4000px;height:2000px;"></div>
			</div>
		</div>
	</div>
	<ul id="processMenu" class="contextMenu">
		<li class="edit"><a href="#variable">流程属性</a></li>
	</ul>
	<ul id="activityMenu" class="contextMenu">
		<li class="edit"><a href="#edit">编辑节点</a></li>
		<li class="delete"><a href="#delete">删除节点</a></li>
		<li class="copy"><a href="#copy">复制节点</a></li>
	</ul>
	<ul id="transitionMenu" class="contextMenu">
		<li class="edit"><a href="#edit">编辑路由</a></li>
		<li class="delete"><a href="#delete">删除路由</a></li>
	</ul>
</div>
<div id="nodeWin" title="节点属性" class="easyui-window" resizable="false"style="width:600px;height:500px;" modal="true" closed="true" border="false" collapsible="false" minimizable="false" maximizable="false">
	<div id="node_tabs"   border="false">
        
        <div id="node_" title="节点属性" border="false" >
        	<s:form id="nodeForm" name="nodeForm">
               <table class="dataTable" >
               		<s:hidden name="sid"></s:hidden>
					<tr>
						<td width="80px">节点名称:</td>
						<td width="70%"><s:textfield name="name" cssClass="easyui-validatebox" style="width: 80%;" validType="length[1,100]" notnull="true" /></td>
					</tr>
					<tr>
						<td width="80px">节点别名:</td>
						<td width="70%"><s:textfield name="alias" cssClass="easyui-validatebox" style="width: 80%;" validType="length[1,100]"  /></td>
					</tr> 
					<tr>
						<td width="80px">是否同步活动</td>
						<td width="70%">
						<div >
								<s:select id="isAsync" name="isAsync" notnull="true" list='#{0:"否",1:"是"}'  listKey="key" listValue="value"/>
						</div>
						<div id="voteDiv" style="display: none;">
								是否投票任务：<s:select id="isVote" name="isVote" notnull="true"  list='#{0:"否",1:"是"}'  listKey="key" listValue="value"/>
								<br>
								处理率(0-1小数)：<s:textfield id="rate" name="voteRate" valid-type="length[1,20]"  cssClass="input_text" style="width:40px"></s:textfield>
						</div>
						</td>
					</tr> 
					<tr>
						<td width="80px">节点时限:</td>
						<td width="70%"><s:textfield id="duration" name="duration" cssClass="easyui-validatebox" style="width: 200px;" validType="allNumber[0,7]"  />(小时)</td>
					</tr> 
					<tr>
						<td width="80px">节点类型:</td>
						<td width="70%"><select id="activityType" name="type" class="easyui-combobox" style="width:200px;"></select></td>
					</tr> 
					<tr>
						<td width="80px">是否多任务:</td>
						<td width="70%"><s:select name="isMultiTask" cssClass="easyui-combobox"  list="#{'0':'单任务','1':'多任务'}" style="width:200px;"  /></td>
					</tr> 
					<tr>
						<td width="80px">节点界面:</td>
						<td width="70%"><s:textfield id="jspUrl" name="url" cssClass="easyui-combobox" style="width:200px;"   /></td>
					</tr>	
				</table>
				 </s:form>
        </div>
         <!-- 流程参与人 -->
		<div id="activityParticipationDiv" title="参与人" >
			<form id="activityParticipationForm" class="dataFormClass">
			<table border="0" class="customDataTable" style="width:100%;padding:5px;height:100%;">
				<tr style="padding:5px;height:35px;">
					<td colspan="3">
						<span>操作对象类型：</span>
	                    <select id="partType" name="type">
	                        <option value="0">全单位</option>
	                        <option value="1">部门</option>
	                        <option value="2">岗位</option>
	                        <option value="3">人员</option>
	                        <option value="4">活动</option>
	                    </select>
					</td>
				</tr>
				<tr>
					<td style="width: 45%;">
						<!-- 选择的类型  1 人员  2部门  3岗位 -->
						<s:hidden name="selectTypes" value="1" id="OperationTypes"></s:hidden>
						<!-- 选择是否唯一或人数限制  1  唯一一个 0 不限制-->
						<s:hidden  id="operationOne"></s:hidden>
						<div id="_target_node_div" style="width: 100%; height: 250px; overflow: auto;border: 1px solid;">
									<ul id="target_node_tree" class="easyui-tree"></ul>
									<div id="selectloadMsg">数据加载中,请稍候...</div>
						</div>
					</td>
					<td style="width: 5%;">
							<p><input type="button"  style="border: 1px solid;" title="选择本项" onClick="addItem();" value="单选"></p>
							<p><input type="button"  style="border: 1px solid;" title="取消选择" onClick="removeItem();" value="取消"></p>
							<p><input type="button"  style="border: 1px solid;" title="取消所有" onClick="clearItem();" value="清除"></p>
					</td>
					<td style="width: 45%;">
						<select id="selectedTargets" name="select" size="2" style="width: 100%; height: 250px;" >
						</select>
					</td>
				</tr>
			</table>
			</form>
		</div>   
     </div>
      <div style="text-align: center;height: 30px;">
					<a  class="easyui-linkbutton" onclick="node_save()">确认</a>
					<a  class="easyui-linkbutton" onclick="showHideFun('nodeWin','close');">关闭</a>
	 </div>	    
</div>

